<template>
  <div>
    <!-- 好消息 -->
    <van-notice-bar left-icon="volume-o" mode="closeable"
                    text="好消息，特大好消息，明天放假，一放放10天，大家可以尽情的玩耍了。"></van-notice-bar>
    <!-- 数据操作 -->
    <div class="button-margin" style="margin: 20rpx;">
      <van-button type="primary" block @tap="changDialog">changDialog</van-button>
      <van-button type="danger" block @tap="showAction">显示操作菜单（原）</van-button>
      <van-button color="linear-gradient(to right, #bee4d1, #07c160)" block>听闻有渐变</van-button>
      <van-button loading oading-type="spinner" block type="info" @tap="loading" loading-text="加载中...（原）" />
      <van-button block round type="info" @tap="showModal" >模态弹窗（原）</van-button>

    </div>
    <!-- 页面的结点 -->
    <van-dialog id="van-dialog" />
    <van-toast id="van-toast" />
  </div>
</template>

<script>
  export default {
    name: "otherPay",
    data() {
      return {
        temp: ['美国', '中国', '巴西', '日本']
      }
    },
    methods: {
      /**
       * @author: @xusy
       * @date: 2020/12/9 10:11
       * @creed: 弹窗操作
       */
      changDialog() {
        this.$dialog.confirm({
          title: 'Dialog',
          message: 'Dialog点击确定和取消'
        }) .then(() => {
          this.$toast('点击确定了')
        }).catch(() => {
          this.$toast('点击取消了')
        });
      },

      /**
       * @author: @xusy
       * @date: 2020/12/10 10:03
       * @creed: 显示操作菜单
       */
      showAction() {
        let _that = this
        wx.showActionSheet({
          itemList: _that.temp,
          itemColor: '#FF392B',
          success (res) {
            let t = _that.temp[res.tapIndex]
            _that.$toast('xx选择了：'+t)
          },
          fail (res) {
            console.log(res.errMsg)
          }
        })
      },
      /**
       * @author: @xusy
       * @date: 2020/12/10 9:45
       * @creed: 加载中的样式
       * @remark:
       * wx.showLoading 和 wx.showToast 同时只能显示一个
       * wx.showLoading 应与 wx.hideLoading 配对使用
       */
      loading() {
        wx.showLoading({
          title: '加载中...',
        })

        setTimeout(function () {
          wx.hideLoading()
        }, 2000)
      },
      /**
       * @author: @xusy
       * @date: 2020/12/10 9:54
       * @creed: 这是一个模态弹窗
       */
      showModal() {
        wx.showModal({
          title: '提示',
          content: '这是一个模态弹窗',
          success (res) {
            if (res.confirm) {
              console.log('用户点击确定')
            } else if (res.cancel) {
              console.log('用户点击取消')
            }
          }
        })
      },
    }
  }
</script>

<style scoped>
.button-margin van-button >>> .van-button{
  margin-bottom: 10rpx;
}
</style>
